<script setup>
import MyMap from '@/components/MyMap/index.vue'
import { onMounted, ref } from 'vue'
import { updateMarker, getMapData } from '@/api/dashboard/marker'
const { proxy } = getCurrentInstance()
const mapData = ref({
  center: '121.004941,29.145908',
  zoom: 18
})
const mymap = ref(null)
const mapMarker = ref(null)
const init = () => {
  getMapData().then((res) => {
    mapData.value = JSON.parse(res.data.content)
    mapData.value.zoom = Number(mapData.value.zoom)
    mymap.value.init(mapData.value)
  })
}
onMounted(() => {
  init()
})
const updateData = () => {
  updateMarker({
    id: 1,
    content: JSON.stringify(mapData.value)
  }).then(() => {
    proxy.$modal.msgSuccess('修改成功')
    mymap.value.init(mapData.value)
  })
}
const handleSetCenter = (center) => {
  mapData.value.center = `${center.lng},${center.lat}`
  updateData()
}
const handleAddMarker = (position) => {
  mapMarker.value.handleAdd(position)
}
const handleDelMarker = (row) => {
  mapMarker.value.handleDelete(row)
}
const handleUpdateMarker = (row) => {
  mapMarker.value.handleUpdate(row)
}
const handleSetMapScale = (scale) => {
  mapData.value.zoom = scale
  updateData()
}
const handleSubmit = () => {
  init()
}
</script>

<template>
  <div>
    <div class="map">
      <MyMap
        ref="mymap"
        @setCenter="handleSetCenter"
        @addMarker="handleAddMarker"
        @delMarker="handleDelMarker"
        @updateMarker="handleUpdateMarker"
        @setMapScale="handleSetMapScale"></MyMap>
    </div>
    <MapMarker ref="mapMarker" @submit="handleSubmit"></MapMarker>
  </div>
</template>

<style lang="scss" scoped>
.map {
  display: flex;
  .setting {
    user-select: none;
    width: 50%;
    padding: 20px;
  }
}
</style>
